<template>
  <view class="supplier-detail-container">
    <!-- 供应商头部信息 -->
    <view class="supplier-header">
      <view class="supplier-avatar-wrap">
        <image
          class="supplier-avatar"
          :src="supplierInfo.logo"
          mode="fill"
        ></image>
      </view>
      <view class="supplier-info">
        <view class="supplier-name">{{ supplierInfo.name }}</view>
        <view class="supplier-phone">{{ supplierInfo.phone }}</view>
      </view>
      <view class="supplier-distance">
        <text class="gui-icons">&#xe63f;</text>
        <text class="distance-text">{{
          (supplierInfo.distance / 1000).toFixed(2) + "km"
        }}</text>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-tabs">
      <view
        class="nav-tab-item"
        :class="{ active: currentTab === 'home' }"
        @click="switchTab('home')"
      >
        首页
      </view>
      <view
        class="nav-tab-item"
        :class="{ active: currentTab === 'intro' }"
        @click="switchTab('intro')"
      >
        简介
      </view>
    </view>

    <!-- 分割标题 -->
    <view class="section-title" v-if="currentTab === 'home'">
      <text>经营品牌</text>
    </view>

    <!-- 品牌列表 -->
    <view class="brand-list" v-if="currentTab === 'home'">
      <view
        class="brand-item"
        v-for="(brand, index) in supplierInfo.brand_data"
        :key="index"
        @click="BrandtoGoods(brand.id)"
      >
        <image class="brand-logo" :src="brand.logo_url" mode="fill"></image>
        <text class="brand-name">{{ brand.name }}</text>
      </view>
    </view>

    <view style="padding: 30rpx 46rpx" v-if="currentTab === 'intro'">
      <view class="address-warp">
        <span style="display: flex; gap: 10rpx;"
          ><text class="gui-icons icons">&#xe63f;</text>经营地址：</span
        >
        <span style="flex: 1;">{{ supplierInfo.address }}</span>
      </view>
      <view style="display: flex; margin: 40rpx 0">
        <span style="display: flex; gap: 10rpx"
          ><text class="gui-icons icons">&#xe63d;</text>营业执照：</span
        >
        <view @click="previewImage(supplierInfo.business_license)">
          <gui-image
            :src="supplierInfo.business_license"
            mode="fill"
            :height="160"
          ></gui-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getSupplierInfo } from "@/apiShop/supplier";
import { onLoad } from "@dcloudio/uni-app";

// 当前选中的标签
const currentTab = ref("home");

// 切换标签
const switchTab = (tab) => {
  currentTab.value = tab;
};
const supplierInfo = ref({});
const getSupplierInfoData = async (id) => {
  const res = await getSupplierInfo({
    supplier_info_id: id,
    user_lat: loaction.value.latitude,
    user_lng: loaction.value.longitude,
  });
  supplierInfo.value = res;
  console.log(supplierInfo.value);
};

const previewImage = (url) => {
  uni.previewImage({
    urls: [url],
  });
};

const BrandtoGoods = (id) => {
  const brand_name =
    supplierInfo.value.brand_data.find((item) => item.id === id).name || "";
  let obj = { ...supplierInfo.value, brand_data: [], brand_name };
  uni.navigateTo({
    url: `/pagesShop/supplier/supplierBrand?id=${id}&supplierInfo=${JSON.stringify(
      obj
    )}&location=${JSON.stringify(loaction.value)}`,
  });
};

const loaction = ref({
  latitude: undefined,
  longitude: undefined,
});
onLoad((options) => {
  if (options.id) {
    loaction.value = getApp().globalData.location;
    getSupplierInfoData(options.id);
  }
});
</script>

<style scoped>
.supplier-detail-container {
  min-height: 100vh;
}

/* 供应商头部信息 */
.supplier-header {
  display: flex;
  align-items: center;
  padding: 50rpx 36rpx;
  background-color: #2196f3;
  color: #fff;
  position: relative;
}

.supplier-avatar-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2rpx solid #fff;
  margin-right: 20rpx;
}

.supplier-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.supplier-info {
  flex: 1;
  margin: 6rpx;
}

.supplier-name {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.supplier-phone {
  font-size: 28rpx;
  opacity: 0.9;
}

.supplier-distance {
  font-size: 24rpx;
  display: flex;
  align-items: center;
}

.distance-icon {
  margin-right: 6rpx;
  font-family: "iconfont";
}

/* 导航标签 */
.nav-tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-tab-item {
  flex: 1;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  position: relative;
  color: #666;
}

.nav-tab-item.active {
  color: #2196f3;
}

.nav-tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #2196f3;
}

/* 分割标题 */
.section-title {
  padding: 20rpx;
  font-size: 28rpx;
  background-color: #f5f5f5;
  color: #333;
  margin: 30rpx 46rpx;
  text-align: center;
}

/* 品牌列表 */
.brand-list {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 20rpx;
}

.brand-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.brand-logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 10rpx;
}

.brand-name {
  font-size: 30rpx;
  color: #333;
  text-align: center;
}
.distance-text {
  font-size: 24rpx;
  margin-left: 10rpx;
  line-height: 1.5;
}
.icons {
  position: relative;
  top: 4px;
}
.address-warp {
  display: flex;
  align-items: flex-start;
}
</style>
